<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-27 17:20:26
 * @LastEditors: hujunjie hujunjie@shudatech.cn
 * @LastEditTime: 2024-12-12 11:28:54
 * @FilePath: \Civil_Servant_Performance_PC\src\views\performance-inventory\civil\work-list.vue
-->
<template>
  <div class="component-container">
    <div class="flex-table">
      <el-table :data="tableList" height="100%" border v-loading="tableLoading" ref="table">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.personalWorkPlanScoreList" border stripe style="width: 100%">
              <el-table-column prop="civilServantName" label="参与人" align="center"></el-table-column>
              <el-table-column prop="workCompletionStageDict" label="完成状态" width="160" align="center">
                <template slot-scope="scope">
                  <dict-tag
                    v-if="scope.row.workCompletionStageDict"
                    :options="dict.type.biz_work_completion_stage"
                    :value="scope.row.workCompletionStageDict"
                  />
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column prop="workCompletionSituation" label="完成情况" min-width="180" align="center">
                <template slot-scope="scope">
                  <span class="pre-wrap align-left">{{ scope.row.workCompletionSituation || '-' }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="workCompletionMaterialUrls" label="完成材料" min-width="180" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.workCompletionMaterialUrls">
                    <el-tooltip
                      v-for="(url, index) in scope.row.workCompletionMaterialUrls.split(',')"
                      :key="index"
                      effect="dark"
                      :content="formatFileUrl(url)['name']"
                      placement="top-start"
                    >
                      <el-button type="text" @click="handlePreviewFile(url)" class="file-preview-btn">
                        {{ formatFileUrl(url)['name'] }}
                      </el-button>
                    </el-tooltip>
                  </div>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column prop="workCompletionDate" label="完成日期" width="130" align="center"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="workType" label="任务类型" width="180" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.biz_work_type" :value="scope.row.workType"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="站办所" align="center"> </el-table-column>
        <el-table-column prop="civilServantName" label="参与人" min-width="100" align="center"> </el-table-column>
        <el-table-column prop="workContent" label="具体内容" min-width="180" align="center">
          <template slot-scope="scope">
            <div class="pre-wrap align-left">{{ scope.row.workContent || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="planScore" label="分值" width="120" align="center"> </el-table-column>
        <el-table-column prop="workCreateDate" label="创建日期" width="160" align="center"> </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="tableTotal > 0"
      :total="tableTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <FilePreview :visible.sync="filePreviewVisible" :file="previewFile"></FilePreview>
  </div>
</template>

<script>
import { list as listPlan } from '@/api/work/work-plan/individual.js'
import { quarterToMonth } from '@/utils/quarter.js'
import FilePreview from '@/components/FilePreview'
import { mixins } from '@/mixins'

export default {
  name: 'performance-inventory_civil_work-list',
  dicts: ['biz_work_nature', 'biz_audit_status', 'biz_work_type', 'biz_work_completion_stage'],
  mixins: [mixins],
  props: {
    queryForm: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    FilePreview
  },
  data() {
    return {
      filePreviewVisible: false,
      previewFile: {},
      // 月度筛选
      monthFilters: [],
      tableTotal: 0,
      tableList: [],
      tableLoading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        workType: '',
        auditStatusDict: ''
      }
    }
  },
  computed: {},
  watch: {
    queryForm: {
      deep: true,
      immediate: true,
      handler(query) {
        this.queryParams = { ...this.queryParams, ...query }
        this.getList()
        this.monthFilters = quarterToMonth(query.quarter).map(month => {
          return { text: month + '月', value: month }
        })
      }
    }
  },
  methods: {
    // 预览文件
    handlePreviewFile(url) {
      let fileItem = this.formatFileUrl(url)
      this.previewFile = { url, ...fileItem }
      this.filePreviewVisible = true
    },
    // 月度数据筛选
    filterMonthHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
    // 表格数据处理
    tableFormat(list) {
      for (let item of list) {
        item.civilServantName = item.personalWorkPlanScoreList
          .map(civil => {
            return civil.civilServantName
          })
          .join('、')
      }
      this.tableList = list
    },
    // 工作列表
    getList() {
      this.tableLoading = true
      listPlan(this.queryParams)
        .then(res => {
          this.tableLoading = false
          let { rows, total } = res
          this.tableTotal = total
          this.tableFormat(rows)
        })
        .catch(err => (this.tableLoading = false))
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__expanded-cell {
  background-color: #fafafa;
  padding: 15px;
}
</style>
